<template>
    <div id="subject">
      <span class="subject-title">{{txt}}</span>
      <img v-if="displayType === 2" :src="fileUrl" class="img"/>
      <audio v-if="displayType === 3" style="width: 100%;outline:none" controls :src="fileUrl" controlsList="nodownload"></audio>
      <video v-if="displayType === 4" class="video" controls :src="fileUrl">
        <track v-if="subtitle" :src="subtitle" lang="en" label="English" kind="subtitles" default />
      </video>
    </div>
</template>

<script>
export default {
  name: 'subject',
  props: {
    displayType: Number,
    fileUrl: String,
    subtitle: String,
    txt: String
  }
}
</script>

<style scoped lang="scss">
#subject{
  width: 100%;
  .subject-title{
    font-size:16px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(16,29,55,1);
    line-height:28px;
  }
  .img{
    width: 100%;
    height: auto;
  }
  .video{
    width: 100%;
    height: auto;
  }
}
</style>
